<template>
  <view class="content">
    <view class="top"></view>

    <uni-list class="content-three commons" :border="false">
      <uni-list-item title="头像" style="line-height: 148upx;">
        <template v-slot:footer>
          <image @click="uploadFiles()" class="slot-image"
                 :src="member.avatar?member.avatar:'../../static/image/bz.png'"
                 mode="widthFix"></image>
        </template>
      </uni-list-item>
    </uni-list>

    <uni-list class="content-one commons" :border="false">
      <uni-list-item title="用户名" link @click="open()" :rightText="member.nick_name?member.nick_name:'待完善'">
      </uni-list-item>
      <picker @change="bindPickerChange" :range="array">
        <uni-list-item title="性别" link :rightText="member.sex==0?'待完善':member.sex==1?'男':'女'"></uni-list-item>
      </picker>
      <picker mode="date" :start="startDate" :end="endDate" @change="bindDateChange">
        <uni-list-item title="生日" link :rightText="member.birthday?member.birthday:'待完善'"></uni-list-item>
      </picker>
      <uni-list-item title="地区" link @click="addressShow = true"
                     :rightText="member.provide_name?member.provide_name+member.city_name+member.county_name:'待完善'">
      </uni-list-item>
      <uni-list-item title="手机号" link :rightText="member.phone?member.phone:'请绑定手机号'"
                     @click="goDump('/pages/my/setPhone')"></uni-list-item>
    </uni-list>
    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog mode="input" message="成功消息" :value="member.nick_name" :duration="2000"
                        :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
    </uni-popup>
    <pickerAddress v-if="addressShow" v-model="addressShow" @confirm="addresspick"/>
  </view>
</template>

<script>
import pickerAddress from '@/components/liudx-pickerAddress/index.vue'

export default {

  components: {pickerAddress},
  data() {
    return {
      extraIcon: {
        color: 'red',
        size: '22',
        type: 'gear-filled'
      },
      member: [],
      array: ['男', '女'],
      addressShow: false,
      form: {
        province: '',
        city: '',
        area: '',
      },
      address: ''
    };
  },
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  onShow() {
    this.get_member();
  },
  methods: {
    addresspick(obj) {
      var _this = this;
      let arr = ['province', 'city', 'area'];
      let place = '';
      var arrs = []
      arr.map(key => {
        this.form[key] = obj[key].AreaId
        place += obj[key].AreaName
        console.log(obj[key].AreaName)
        arrs.push(obj[key].AreaName)
      })
      this.address = place
      this.addres_obj = arrs;
      var _this = this;
      var data = {
        provide_id: this.form['province'],
        city_id: this.form['city'],
        county_id: this.form['area'],
      }
      this.$api.doRequest("post", "api/upd_region", data).then(res => {
        _this.get_member()
      })
    },
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === 'start') {
        year = year - 120;
      } else if (type === 'end') {
        year = year + 2;
      }
      month = month > 9 ? month : '0' + month;
      day = day > 9 ? day : '0' + day;
      return `${year}-${month}-${day}`;
    },
    open() {
      this.$refs.popup.open()
    },
    /**
     * 点击取消按钮触发
     * @param {Object} done
     */
    close() {
      // TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
      // ...
      this.$refs.popup.close()
    },
    /**
     * 点击确认按钮触发
     * @param {Object} done
     * @param {Object} value
     */
    confirm(value) {
      // 输入框的值
      var data = {
        nick_name: value
      }
      var _this = this;
      _this.$api.doRequest("post", "api/upd_nickname", data).then(res => {
        if (res.data.code == 200) {
          uni.showToast({
            title: res.data.msg
          })
          _this.get_member();
        }
      })
      this.$refs.popup.close()
    },
    bindPickerChange(value) {
      var data = {
        sex: value.detail.value + 1
      }
      var _this = this;
      _this.$api.doRequest("post", 'api/upd_sex', data).then(res => {
        _this.get_member();
      })
    },
    bindDateChange(value) {
      var data = {
        birthday: value.detail.value
      }
      var _this = this;
      _this.$api.doRequest("post", 'api/upd_birthday', data).then(res => {
        _this.get_member();
      })
    },
    goDump(url) {
      uni.navigateTo({
        url: url,
      });
    },
    //获取用户信息
    get_member() {
      var data = {}
      var _this = this;
      _this.$api.doRequest("post", "api/userinfo", data).then(res => {
        console.log(res.data.data)
        _this.member = res.data.data
      })
    },
    //上传头像
    uploadFiles() {
      var _this = this;
      uni.showLoading({})
      //选择图片
      uni.chooseImage({
        count: 1, //上传图片的数量，默认是9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          const tempFilePaths = res.tempFilePaths;    //拿到选择的图片，是一个数组
          console.log(tempFilePaths)
          uni.uploadFile({
            url: 'https://newplatform.renkangshangcheng.cn/api/upload_file',		//post请求的地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              type: 0
            },
            header: {
              'Authorization': uni.getStorageSync('token')
            },
            success: (uploadFileRes) => {
              console.log(uploadFileRes.data)
              var res = JSON.parse(uploadFileRes.data)
              if (res.code == 200) {
                var data = {
                  avatar: res.data.file_url
                }
                _this.$api.doRequest("post", "api/upd_avatar", data).then(res => {
                  _this.get_member();
                })
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: "none"
                })
              }
            }
          })
        }
      });
    }
  }
};
</script>

<style>
.content {
  width: 750upx;
  height: 95vh;
  background-color: #F8F8F8;
}

.top {
  width: 750upx;
  height: 1upx;
}

.box {
  width: 750upx;
  background-color: #fff;
}

.commons {
  width: 710upx;
  margin: 0 auto;
}

.content-one {
  margin-top: 20upx;
  /* margin-bottom: 20upx; */
}

.content-two {
  margin-top: 20upx;
}

.slot-image {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  margin-right: 10px;
  width: 148upx;
  height: 148upx;
}
</style>
